<template>
	<view class="page" >
		<view class="goods-name">
			<view class="goods-info" v-for="(item,index) in bizpro" :key="index">
				<image :src="item.bizpro_imgurl" ></image>
				<text class="goods-content">{{item.bizpro_name}}</text>
				<text class="size">{{item.bizpro_spec_value}}</text>
				<view class="price-count">
					<text>¥{{item.price}}</text>
				</view>
				<view class="operation">
					<text @click="reduce(item,index)" :class="item.buy_num === 1?'no-click':''">-</text>
					<text style="border-left: none; border-right: none;">{{item.buy_num}}</text>
					<text @click="add(item,index)">+</text>
				</view>
			</view>
		</view>
		<view class="order-info" >
			<view class="order-money-wrap">
				<text class="order-money">订单金额：</text>
				<text class="money">¥{{total_price}}</text>
			</view>
			<view class="order-money-wrap" v-if="reduction_active">
				<text class="order-money">活动满减：</text>
				<text class="money">- ¥ {{getorderInfo.reduction_momey}}</text>
			</view>
			<view class="order-money-wrap">
				<text class="order-money">邮寄方式：</text>
				<text class="money">{{getorderInfo.mail}}</text>
			</view>
		</view>
		<view class="receive-info">
			<text class="receive-info-content">请填写收货信息</text>
			<view class="receiver-name-wrap">
				<text class="receiver-name">收货人姓名：</text>
				<view class="input-info">
					<input type="text" placeholder="请输入真实姓名" placeholder-style="color: #ccc" cursor-spacing="300"  v-model="receive_name" required/>
					<view class="line"></view>
				</view>
			</view>
			
			<view class="receiver-name-wrap">
				<text class="receiver-name">收货手机号：</text>
				<view class="input-info">
					<input type="number" placeholder="请输入有效手机号码" placeholder-style="color: #ccc" cursor-spacing="250" v-model="receive_phone" required/>
					<view class="line"></view>
				</view>
			</view>
			
		<!-- 	<view class="receiver-name-wrap">
				<text class="receiver-name">请输入ID号 ：</text>
				<view class="input-info">
					<input type="text" placeholder="填写错误无效" placeholder-style="color: #ccc" cursor-spacing="200" v-model="member_code" required />
					<view class="line"></view>
				</view>
			</view> -->
			
			<view class="receiver-name-wrap">
				<text class="receiver-name">请选择地区：</text>
				<view class="input-info">
					<!-- <input type="text" placeholder="辽宁省沈阳市和平区" cursor-spacing="150" v-model="province" /> -->
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<input type="text" disabled placeholder="点击选择省市区" :value="provincec" placeholder-style="color: #ccc"  />
					</pick-regions>
					<view class="line" style="margin-top:0px;"></view>
				</view>
			</view>
			
			<view class="address-wrap">
				<text class="address">详 细 街 路：</text>
				<view class="address-info">
					<textarea v-model="address" maxlength="100" placeholder-style="color: #ccc" placeholder="请输入您的详细地址及门牌号" />
					<!-- <input type="text" placeholder="请输入您的详细地址及门牌号" cursor-spacing="80" v-model="address" /> -->
					<view class="line"></view>
				</view>
			</view>
		</view>
		<view class="pay">
			<text class="goods-total">共{{count_num}}件商品 </text>
			<text class="total-price">¥ {{reduction_total_price}}</text>
			<view class="pay-confirm" @click="getConfirmPay(getorderInfo.mo_id)" >
				确定支付
			</view>
		</view>
		<ZhuxiaoPopup v-if='showzxPopup' :closeBtn='closePopup' :commitZx='ConfirmPay'></ZhuxiaoPopup>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import ZhuxiaoPopup from '@/components/zhuxiaoPopup.vue';
	export default {
		onLoad: function(options) {
			this.order_id = options.order_id
			//调用需要的方法 
			this.getOrderConfirm();
		},
		data() {
			return {
				count: 1,
				getorderInfo:[],
				bizpro:[],
				receive_phone:'',
				receive_name:'',
				member_code:'',
				province:'',
				city:'',
				area:'',
				address:'',
				pay_price:'',
				total_price:'0.00',
				count_num:1,
				region:[],
				defaultRegion:['广东省','广州市','番禺区'],
				defaultRegionCode:'110101',
				provincec:'',
				//是否满足活动满减
				reduction_active:false,
				reduction_total_price:"",
				remove:true,//去重复状态
				showzxPopup:false//弹窗
				
			}
		},
		components: {
			ZhuxiaoPopup,
			
		},
		methods: {
			reduce(item,index) {
				if(item.buy_num > 1) {
					this.count_num --
					item.buy_num--;
					this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
					this.$api.getOrderWriteNum({odetail_id:item.orderdetail_id,num:item.buy_num,order_id:item.order_id,
				type:2})
					.then(res=>{
						if(res.data.status == true){
							//下方总价格
							this.reduction_total_price=(parseFloat(this.reduction_total_price) - parseFloat(item.price)).toFixed(2)
							//上方总价格
							this.total_price=(parseFloat(this.total_price) - parseFloat(item.price)).toFixed(2)
						
							
							//购买价格是否大于活动满减 则 总价格减掉满减的钱数
							if(parseFloat(this.reduction_price) <= parseFloat(this.total_price)){
								this.reduction_active = true
								this.reduction_total_price = (this.total_price - this.reduction_money).toFixed(2)
							}else{
								this.reduction_total_price = this.total_price
								this.reduction_active = false
							}
						}
							
					})
					.catch(res=>{
						
					})
					
				}
			},
			//加商品数量
			add(item,index) {
				this.count_num ++
				item.buy_num++;
				this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
				this.$api.getOrderWriteNum({odetail_id:item.orderdetail_id,num:item.buy_num,order_id:item.order_id,type:1})
					.then(res=>{
						//下方总价格
						this.reduction_total_price=(parseFloat(this.reduction_total_price) + parseFloat(item.price)).toFixed(2)
						//上方总价格
						this.total_price=(parseFloat(this.total_price) + parseFloat(item.price)).toFixed(2)
				
						//购买价格是否大于活动满减 则 总价格减掉满减的钱数
						if(parseFloat(this.reduction_price) <= parseFloat(this.total_price)){
							this.reduction_active = true
							this.reduction_total_price = (this.total_price - this.reduction_money).toFixed(2)
						}else{
							this.reduction_total_price =this.total_price
							this.reduction_active = false
						}
					
							
					})
					.catch(res=>{
						
					})
			},
			//商品详情
			// toDetail(item.id) {
			// 	uni.navigateTo({
			// 		url: '/pages/goods/GoodsDetail?id='+id
			// 	})
			// },
			//确认订单页
			getOrderConfirm() {
			
				this.$api.getOrderConfirm({order_id:this.order_id}).then(res => {
					if(res.data.status == true){
						this.getorderInfo = res.data.data;
						this.bizpro = res.data.data.info;
						this.total_price = res.data.data.total_price
						this.count_num = res.data.data.count_num
						this.reduction_price = res.data.data.reduction_price //满多少减的钱数
						this.reduction_money = res.data.data.reduction_momey //满减的钱数
						
						//购买价格是否大于活动满减 则 总价格减掉满减的钱数
						if(parseFloat(this.reduction_price) <= parseFloat(this.total_price)){
							
							this.reduction_active = true
							this.reduction_total_price = (this.total_price - this.reduction_money).toFixed(2)
						}else{
							//就是总价价格
							this.reduction_total_price = this.total_price
						}
				
					}else{
						uni.showToast({
						   title:'暂无数据' ,
													
						})
					}
					
				})
			},
			//关闭弹窗
			closePopup(){
				this.showzxPopup=false
				//返回订单付款
				uni.navigateTo({
					url: '/pages/order/NotPay?status=0'
				})
			},
			ConfirmPay(){
				uni.navigateTo({
					url: '/pages/pay/PayWays?total_price='+this.reduction_total_price+'&count_num='+this.count_num+'&order_id='+this.order_id+'&receive_phone='+this.receive_phone+'&order_number='+this.getorderInfo.order_number
				})
			},
			//点击确认支付 修改订单信息
			getConfirmPay() {
				console.log(this.reduction_active);
				if(this.reduction_active === true){
					var cheap_price = this.reduction_money
				}else{
					var cheap_price =0
				}
			
				//收货人姓名不能为空
				if (this.receive_name == ''){
					
					uni.showToast({
					      title:'收货人姓名不能为空',
					     icon:'none',
					     duration:1000
					     })
						 return false
				}
				//请选择地区
				if (this.province == ''){
					// this.remove = true
					uni.showToast({
					      title:'请选择地区',
					     icon:'none',
					     duration:1000
					     })
						 return false
				}
				//详细地址不能为空
				if (this.address == ''){
					// this.remove = true
					uni.showToast({
					      title:'详细地址不能为空',
					     icon:'none',
					     duration:1000
					     })
						 return false
				}
				// this.remove = false
				this.$api.getConfirmPay({
					order_id:this.order_id,
					receive_phone:this.receive_phone,
					receive_name:this.receive_name,
					// member_code:this.member_code,
					province:this.province,
					city:this.city,
					area:this.area,
					address:this.address,
					pay_price:this.reduction_total_price,
					cheap_price:cheap_price
					}).then(res => {
					if(res.data.status == true){
						//根据云盟时代中是否有这个手机号的用户 没有弹窗提示 是否继续 否 返回订单付款页 是 继续支付
						if(res.data.data.false_status == true){
							//证明有这个手机号
							//选择微信支付  还是 支付宝支付 页面
							uni.navigateTo({
								url: '/pages/pay/PayWays?total_price='+this.reduction_total_price+'&count_num='+this.count_num+'&order_id='+this.order_id+'&receive_phone='+this.receive_phone+'&order_number='+this.getorderInfo.order_number
							})
						}else if(res.data.data.false_status == false){
							var t = this
							this.showzxPopup = !this.showzxPopup;
							//证明云盟时代没有这个用户 提示信息
							/* this.$showModal({  
							    title: '提示',  
							    content: '您预留得收货号码尚未注册\n可能导致激活失败\n是否继续付款？',  
							    cancelText:'取消',  
							    confirmText: '确认'  
							}).then(res =>{
								if (res.confirm) {
									//选择微信支付  还是 支付宝支付 页面
									uni.navigateTo({
										url: '/pages/pay/PayWays?total_price='+t.reduction_total_price+'&count_num='+t.count_num+'&order_id='+t.order_id+'&receive_phone='+t.receive_phone+'&order_number='+t.getorderInfo.order_number
									})
								    console.log('用户点击确定');
								} else if (res.cancel) {
									//返回订单付款
									uni.navigateTo({
										url: '/pages/order/NotPay?status=0'
									})
								    console.log('用户点击取消');
								}
							}).catch(err=>{
								console.log(err)
							})  */
							// uni.showModal({
							//     title: '提示',
							//     content: "您预留得收货号码尚未注册\n可能导致激活失败\n是否继续付款？",
							// 	cancelText:'否',
							// 	confirmText:'是',
							//     success: function (res) {	
							//         if (res.confirm) {
							// 			//选择微信支付  还是 支付宝支付 页面
							// 			uni.navigateTo({
							// 				url: '/pages/pay/PayWays?total_price='+t.reduction_total_price+'&count_num='+t.count_num+'&order_id='+t.order_id+'&receive_phone='+t.receive_phone+'&order_number='+t.getorderInfo.order_number
							// 			})
							//             console.log('用户点击确定');
							//         } else if (res.cancel) {
							// 			//返回订单付款
							// 			uni.navigateTo({
							// 				url: '/pages/order/NotPay?status=0'
							// 			})
							//             console.log('用户点击取消');
							//         }
							//     }
							// });
						}
						
				
						
					}else{
						uni.showToast({
						   title:'暂无数据' ,
													
						})
					}
					
				})
				
			},
			
			handleGetRegion(region){
				this.region = region
				this.provincec=region[0].name+' '+region[1].name+' '+region[2].name
				this.province=region[0].name
				this.city=region[1].name
				this.area=region[2].name
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 20rpx);
		padding-top: 20rpx;
		background-color: #f7f7f7;
	}
	.goods-name {
		position: relative;
		width: 750rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(204,204,204,1);
		padding-bottom: 30rpx;
	}
	.goods-info {
		position: relative;
		width: 690rpx;
		margin-left: 30rpx;
		height: 209rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}
	.goods-info image {
		width: 160rpx;
		height: 160rpx;
		margin-top: 29rpx;
		
	}
	.goods-content {
		position: absolute;
		top: 30rpx;
		left: 230rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		width: 400rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
	}
	.price-count {
		position: absolute;
		top: 90rpx;
		left: 232rpx;
		height: 23rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254,177,71,1);
	}
	.size {
		position: absolute;
		top: 140rpx;
		left: 232rpx;
		width: 200rpx;
		height: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}
	.operation {
		display: flex;
		position: absolute;
		top: 120rpx;
		right: 0rpx;
		width: 216rpx;
		height: 58rpx;
		
	}
	
	.operation text {
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 72rpx;
		height: 58rpx;
		font-size: 50rpx;
		line-height: 48rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(204, 204, 204, 1);
	}
	.operation text:nth-child(2) {
		font-size: 30rpx;
	}
	.operation text:last-child {
		border-radius:0 10rpx 10rpx 0;
	}
	/* .operation {
		position: absolute;
		top: 139rpx;
		right: 28rpx;
		display: flex;
		width: 186rpx;
		height: 50rpx;
	}
	.operation text {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 63rpx;
		height: 50rpx;
		background: rgba(255,255,255,1);
		border: 1rpx solid rgba(204,204,204,1);
	} */
	.order-info {
		width: 750rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0 4rpx 8rpx 0 rgba(204,204,204,1);
	}
	.order-money-wrap {
		width: 670rpx;
		height: 79rpx;
		line-height: 79rpx;
		position: relative;
		border-bottom: #F1F1F1 1rpx solid;
	}
	.order-money-wrap:last-child{
		border-bottom: none;
	}
	.order-money {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		/* margin-left: 30rpx; */
	}
	.money {
		position: absolute;
		right: 0rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.activity-reduce-wrap {
		width: 750rpx;
		height: 78rpx;
		line-height: 78rpx;
	}
	.activity-reduce {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 30rpx;
	}
	.reduce-money {
		position: absolute;
		right: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.send-wrap {
		width: 750rpx;
		height: 76rpx;
	}
	.send-way {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 30rpx;
	}
	.no-click {
		color: #ccc;
		border-radius: 10rpx 0 0 10rpx;
	}
	.post {
		position: absolute;
		right: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.receive-info {
		position: relative;
		width: 750rpx;
		height: auto;
		display: table;
		margin-top: 20rpx;
		overflow: auto;
		background: rgba(255,255,255,1);
		box-shadow:0 4rpx 8rpx 0 rgba(204,204,204,1);
		padding-bottom: 30rpx;
		margin-bottom: 120rpx;
	}
	.receive-info-content {
		display: block;
		margin-left: 30rpx;
		margin-top: 30rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(254,177,71,1);
	}
	.receiver-name-wrap {
		position: relative;
		width: 750rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 30rpx;
	}
	.receiver-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 30rpx;
	}
	.input-info {
		position: absolute;
		right: 30rpx;
		top: 12rpx;
		width: 474rpx;
		height: 60rpx;
		background:rgba(250,250,250,1);
	}
	.input-info input {
		padding-left: 20rpx;
		width: 100%;
		height: 100%;
	}
	.line {
		width: 472rpx;
		height: 10rpx;
		border: 1rpx solid rgba(254,177,71,1);
		border-top: none;
		margin-top: -10rpx;
	}
	.address-wrap {
		position: relative;
		width: 750rpx;
		height: 150rpx;
		line-height: 150rpx;
	}
	.address {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 30rpx;
	}
	.address-info {
		position: absolute;
		right: 31rpx;
		top: 0;
		width: 474rpx;
		height: 140rpx;
	}
	.address-info textarea {
		padding-left: 20rpx;
		height: 100%;
		width: 100%;
		background-color: rgba(250,250,250,1);
	}
	.pay {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: pink;
		margin-top: 50rpx;
		background: rgba(255,255,255,1);
	}
	.goods-total {
		width: 126rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		margin-left: 30rpx;
	}
	.total-price {
		width: 137rpx;
		height: 26rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,77,77,1);
		margin-left: 73rpx;
	}
	.pay-confirm {
		position: absolute;
		top: 21rpx; 
		right: 30rpx;
		display: flex;
		justify-content: center;
		width: 324rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: rgba(253,149,47,1);
		border-radius: 6rpx;
		font-size:16px;
		color:#fff;
	}
	.pay-confirm text {
		width: 118rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
</style>
